<!-- 
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved. 
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com 
-->

<script>
    var file_menu;
    file_menu = new render_somthing();
    // 文件操作菜单
    {
        file_menu.init({
            // div的id
            id: "#file_menu",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div style="display: flex;flex-direction: row;align-items: center;"></div>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <div data-key="click_function" style="margin-left: 50px;white-space: nowrap;">
                    <span>#{title}</span>
                </div>
`,
            },
            callback: {
                click: function (res) {
                    if (res.key == "click_function") {
                        click_file_menu(res);
                    }
                }
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
               # {title}     - 变量，表示数据数组中对象的key
            */
            condition: [{
                    expression: "#{type}=='split'",
                    html: `
                <div style="white-space: nowrap;margin-left: 5px;margin-right: 5px;">
                    |
                </div>`
                },
                {
                    expression: "#{type}=='html'",
                    html: `
<div data-key='click_function'>#{html}</div>
`
                },
                {
                    expression: "#{img}!=undefined",
                    html: `
                <div class="btn_img" title="#{title}" data-key="click_function" style="margin-left: 5px;white-space: nowrap;">
                    <img class="btn_img" style="width:35px;height:35px;" src="#{img}" />
                </div>
                `
                }
            ],
        })

        data = [{
                type: "html",
                html: `<img title="保存" src="https://res.dcdev.net/dcdev/v1.0.8/assets/images/save.svg" style="width: 30px;margin-left: 5px;">`,
                title: "保存",
            },
            {
                type: "split"
            },
            {
                type: "html",
                html: `<img title="新建" src="https://res.dcdev.net/dcdev/v1.0.8/assets/images/new.svg" style="width: 30px;">`,
                title: "新建",
            },
            {
                type: "html",
                html: `<img title="另存" src="https://res.dcdev.net/dcdev/v1.0.8/assets/images/saveas.svg" style="width: 33px;margin-left: -5px;" />`,
                title: "另存",
            },
            {
                type: "html",
                html: `<img title="下载" src="https://res.dcdev.net/dcdev/v1.0.8/assets/images/download.svg" style="width: 33px;margin-left: -5px;" />`,
                title: "下载",
            },
            {
                type: "html",
                html: `<img onclick="copy_url()" title="复制url"  src="https://res.dcdev.net/dcdev/v1.0.8/assets/images/link.svg" style="width: 20px;margin-left: 50px;" />`,
                title: "复制url"
            }, {
                type: "html",
                html: `<img onclick="preview_by_desktop()" title="桌面预览"  src="https://res.dcdev.net/dcdev/v1.0.8/assets/images/preview.svg" style="width: 20px;margin-left: 5px;" />`,
                title: "桌面预览"
            },
            {
                type: "html",
                html: `<img onclick="preview_by_qrcode()" title="手机预览" src="https://res.dcdev.net/dcdev/v1.0.8/assets/images/qrcode.svg" style="width: 20px;margin-left: 5px;margin-right: 5px;" />`,
                title: "手机预览"
            },

        ]

        file_menu.render(data);
    }

    function click_file_menu(res) {
        var content = get_selected_content();
        switch (res.value.title) {
            case "保存":
                if (component_data.desc == $(`#page_name`).val()) {
                    // 有组件id
                    if (url_params && url_params.id) {
                        save_component_code();
                    }
                    // 没有组件
                    else {
                        var url =
                            "https://api.dcdev.net/v1.0.1/component/create_component.php";
                        var data = {
                            "uid": user_info.uid,
                            "vendor": selected_framework.join(","),
                            "desc": $(`#page_name`).val() ? $(`#page_name`).val() : "未命名",
                        }
                        $.ajax({
                            method: "post",
                            dataType: "json",
                            url: url,
                            data: {
                                params: JSON.stringify(data)
                            },
                            success: function (res) {
                                if (res.res) {
                                    location.href = location.href.split("?")[0] +
                                        `?id=${res.component_id}`;
                                } else {
                                    ui_class.show_error(res.desc);
                                }
                            }
                        })
                    }
                }
                // 名字被修改
                else {
                    var url =
                        "https://api.dcdev.net/v1.0.1/component/update_component.php";
                    var data = {
                        "component_id": component_data.component_id,
                        "vendor": selected_framework.join(","),
                        "desc": $(`#page_name`).val(),
                    }
                    $.ajax({
                        method: "post",
                        dataType: "json",
                        url: url,
                        data: {
                            params: JSON.stringify(data)
                        },
                        success: function (res) {
                            if (res.res) {
                                ui_class.show_success("保存成功.");
                            } else {
                                ui_class.show_error(res.desc);
                            }
                        }
                    })

                }
                break;
            case "另存":
                ui_class.show_inputor({
                    type: "char",
                    title: "另存",
                    opacity: 0.2,
                    min_value: 4,
                    max_value: 20,
                }, function (res) {
                    $(`#page_name`).val(res.text);
                    var url =
                        "https://api.dcdev.net/v1.0.1/component/create_component.php";
                    var data = {
                        "uid": user_info.uid,
                        "vendor": selected_framework.join(","),
                        "desc": $(`#page_name`).val() ? $(`#page_name`).val() : "",
                    }
                    $.ajax({
                        method: "post",
                        dataType: "json",
                        url: url,
                        data: {
                            params: JSON.stringify(data)
                        },
                        success: function (res) {
                            var url =
                                "https://api.dcdev.net/v1.0.1/component/store_component.php";
                            var data = {
                                "uid": user_info.uid,
                                "component_id": res.component_id,
                                "content": editor.getValue(),
                            }
                            $.ajax({
                                method: "post",
                                dataType: "json",
                                url: url,
                                data: {
                                    params: JSON.stringify(data)
                                },
                                success: function (res) {
                                    if (res.res) {
                                        location.href = location.href.split("?")[0] +
                                            `?id=${res.component_id}`;
                                    } else {
                                        ui_class.show_error(res.desc);
                                    }
                                }
                            })
                        }
                    })
                });
                break;
            case "下载":
            // 下载文件
            {
                //保存html
                function fake_click(obj) {
                    var ev = document.createEvent("MouseEvents");
                    ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0,
                        false, false,
                        false, false, 0, null
                    );
                    obj.dispatchEvent(ev);
                }

                function export_raw(name, data) {
                    var urlObject = window.URL || window.webkitURL || window;
                    var export_blob = new Blob([data]);
                    var save_link = document.createElementNS(
                        "http://www.w3.org/1999/xhtml", "a")
                    save_link.href = urlObject.createObjectURL(export_blob);
                    save_link.download = name;
                    fake_click(save_link);
                }
            }
            var html = `
<html>
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        html {
            height: 100%;
        }
    
        body {
            overflow: hidden;
            height: 100%;
        }
    <\/style>
<\/head>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"><\/script> 
<body>
    ${editor.getValue()}
<\/body>
<\/html>
`
            debugger;
            export_raw(`${$(`#page_name`).val()}_${md5(project_info.pid + ($(`#page_name`).val()))}.html`, html);
            break;
        case "新建":
            ui_class.show_inputor({
                type: "char",
                title: "新建",
                opacity: 0.2,
                min_value: 4,
                max_value: 20,
            }, function (res) {
                $(`#page_name`).val(res.text);
                var url =
                    "https://api.dcdev.net/v1.0.1/component/create_component.php";
                var data = {
                    "uid": user_info.uid,
                    "vendor": selected_framework.join(","),
                    "desc": $(`#page_name`).val() ? $(`#page_name`).val() : "",
                }
                $.ajax({
                    method: "post",
                    dataType: "json",
                    url: url,
                    data: {
                        params: JSON.stringify(data)
                    },
                    success: function (res) {
                        if (res.res) {
                            location.href = location.href.split("?")[0] +
                                `?id=${res.component_id}`;
                        } else {
                            ui_class.show_error(res.desc);
                        }
                    }
                })
            });
            break;
        default:
            break;
        }
    }
</script>

<!-- 处理菜单点击事件 -->
<script>

</script>